<template>
  <div class="app-container">
    <el-form :model="searchForm" :inline="true">
      <el-row>
        <el-col :span="18">
          <el-form-item prop="fuzzy">
            <el-input
              v-model="searchForm.fuzzy"
              style="width: 250px"
              placeholder="仪器名称/仪器编号/仪器型号/仪器品牌"
            />
          </el-form-item>
          <el-form-item prop="type" label="仪器类别:">
            <el-select
              v-model="searchFormData.type"
              style="width: 145px"
              placeholder="请选择仪器类别"
              @change="secondColumnChange($event)"
              value-key="id"
              clearable
            >
              <el-option
                v-for="item in typleList"
                :key="item.id"
                :label="item.name"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="classType" label="检测类别:">
            <el-select
              v-model="searchFormData.classType"
              style="width: 145px"
              placeholder="请选择检测类别"
              @change="secondColumn($event)"
              value-key="id"
              clearable
            >
              <el-option
                v-for="item in classTypeList"
                :key="item.id"
                :label="item.name"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="state" label="仪器状态:">
            <el-select
              v-model="searchForm.state"
              style="width: 145px"
              placeholder="请选择仪器状态"
              clearable
            >
              <el-option
                v-for="item in statusList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="isOwn" label="仪器权属:">
            <el-select
              v-model="searchForm.isOwn"
              style="width: 145px"
              placeholder="请选择仪器权属"
              clearable
            >
              <el-option
                v-for="item in isOwnList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="applyStatus" label="库存状态:">
            <el-select
              v-model="searchForm.applyStatus"
              style="width: 145px"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in applyStatus"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <template>
              <el-button
                type="primary"
                class="iconfont icon-chaxun1"
                size="small"
                @click="handleSearch"
              >
                查询</el-button
              >
              <el-button type="primary" size="small" @click="tabPrint">
                标签打印</el-button
              >
              <template v-if="showTitle">
                <el-row
                  style="text-align:center;font-size:14px;margin-top: 10px;"
                >
                  <el-col :span="24"
                    >Web打印服务C-Lodop软件未安装启动，请<a
                      href="#"
                      style="color:red"
                      @click="fileDownLoad"
                      >点击这里</a
                    >下载执行安装</el-col
                  >
                </el-row>
                <!--              <el-row style="text-align:center;font-size:14px;padding-top:3px;">-->
                <!--                <el-col :span="24">(若此前已安装过，<a href="#" style="color:red" @click="tabPrint">可点这里直接再次启动</a>），成功后请刷新本页面。</el-col>-->
                <!--              </el-row>-->
              </template>
              <template v-else>
                <div style="visibility: hidden;">信息提示</div>
              </template>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="6" class="search-right">
          <el-button type="text" @click="addNew()">新增仪器</el-button>
          <el-button type="text" @click="InstrumentData()">仪器借出</el-button>
          <el-button type="text" @click="handleUpload">导入仪器</el-button>
          <el-button type="text" @click="handleDownload()">导出仪器</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div>
      <el-table
        ref="stockTable"
        stripe
        border
        :data="factorData"
        class="table-item"
        highlight-current-row
        :header-cell-style="{ background: '#ECF3FC' }"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <template slot="empty">
          <div class="table_empty">
            <div class="empty_tips">
              <span> 暂无数据 </span>
            </div>
          </div>
        </template>
        <el-table-column
          type="selection"
          fixed="left"
          width="55"
          align="center"
        />
        <el-table-column type="index" width="70" align="center" label="序号" />
        <el-table-column
          prop="number"
          label="仪器编号"
          width="180"
          align="center"
        />
        <el-table-column
          prop="name"
          label="仪器名称"
          width="180"
          align="center"
        />
        <el-table-column
          prop="type"
          label="仪器类别"
          width="110px"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.type == '1'">现场采样仪器</span>
            <span v-if="scope.row.type == '2'">现场检测仪器</span>
            <span v-if="scope.row.type == '3'">实验室仪器</span>
            <span v-if="scope.row.type == '4'">校准仪器</span>
            <span v-if="scope.row.type == '5'">样品制备仪器</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="classType"
          label="检测类别"
          width="100px"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.classType == '1'"> 水</span>
            <span v-if="scope.row.classType == '2'">气</span>
            <span v-if="scope.row.classType == '3'">噪声</span>
            <span v-if="scope.row.classType == '4'"
              >土壤、底泥、固废、污泥和生活垃圾</span
            >
            <span v-if="scope.row.classType == '5'">样品制备</span>
            <span v-if="scope.row.classType == '6'">小型分析仪器</span>
            <span v-if="scope.row.classType == '7'">色谱仪 </span>
            <span v-if="scope.row.classType == '8'">光谱仪</span>
            <span v-if="scope.row.classType == '9'">质谱仪</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="manufacturer"
          label="仪器品牌"
          width="100"
          align="center"
        />
        <el-table-column
          prop="model"
          label="仪器型号"
          width="180"
          align="center"
        />
        <el-table-column
          prop="serialNumber"
          label="出厂编号"
          width="120"
          align="center"
        />
        <el-table-column
          prop="isMaster"
          label="仪器属性"
          width="100px"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.isMaster == '1'">主仪器</span>
            <span v-if="scope.row.isMaster == '2'">辅助仪器</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="position"
          label="放置地点"
          width="140"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="department"
          label="使用部门"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="manufacturer"
          label="仪器负责人"
          width="180"
          align="center"
        />

        <el-table-column
          prop="isOwn"
          label="仪器权属"
          width="100"
          align="center"
        >
          >
          <template slot-scope="scope">
            <span v-if="scope.row.isOwn == '1'">自有</span>
            <span v-if="scope.row.isOwn == '2'">外借</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="lastTime"
          label="上次检定/校准日期"
          width="180"
          align="center"
        />
        <el-table-column
          prop="cycle"
          label="检定/校准周期"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.cycle == '1'">一个月 </span>
            <span v-if="scope.row.cycle == '2'">三个月</span>
            <span v-if="scope.row.cycle == '3'">半年</span>
            <span v-if="scope.row.cycle == '4'">一年</span>
            <span v-if="scope.row.cycle == '5'">两年</span>
            <span v-if="scope.row.cycle == '6'">三年</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="nextTime"
          label="下次检定/校准日期"
          width="180"
          align="center"
        />
        <el-table-column
          prop="status"
          label="仪器状态"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <span
              style="background: red;padding: 20px;color: #fff;;"
              v-if="scope.row.status == '0'"
              >报废</span
            >
            <span
              style="background: #607d8b;padding: 20px;color: #fff;;"
              v-if="scope.row.status == '1'"
              >降级</span
            >
            <span
              style="background: #c9b9b9;padding: 20px;color: #fff;;"
              v-if="scope.row.status == '2'"
              >停用</span
            >
            <span
              style="background: #81c784;padding: 20px;color: #fff;;"
              v-if="scope.row.status == '3'"
              >准用</span
            >
            <span
              style="background: #13CE66;padding: 20px;color: #fff;;"
              v-if="scope.row.status == '4'"
              >合格</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="applyStatus"
          label="库存状态"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.applyStatus == '1'"
              style="background: #81c784;padding: 20px;color: #fff;;"
              >在库</span
            >
            <span
              v-if="scope.row.applyStatus == '2'"
              style="background: #c9b9b9;padding: 20px;color: #fff;;"
              >待出库</span
            >
            <span
              v-if="scope.row.applyStatus == '3'"
              style="background: #13CE66;padding: 20px;color: #fff;;"
              >已出库</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          width="180"
          align="center"
        />
        <el-table-column fixed="right" align="center" label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="text" @click="View(scope.row)"> 查看</el-button>
            <div class="erc-divider-vertical" />
            <el-button type="text" @click="edit(scope.row)">编辑</el-button>
            <div class="erc-divider-vertical" />
            <el-dropdown>
              <span class="el-dropdown-link"> 更多 </span>
              <el-dropdown-menu>
                <el-dropdown-item
                  ><el-button type="text" @click="Instrument(scope.row)"
                    >仪器借出</el-button
                  ></el-dropdown-item
                >
                <el-dropdown-item
                  ><el-button type="text" @click="handleCopy(scope.row)"
                    >复制</el-button
                  ></el-dropdown-item
                >
                <el-dropdown-item
                  ><el-button type="text" @click="handleDelete(scope.row)"
                    >删除</el-button
                  ></el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div style="">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="searchForm.pageNumber"
        :limit.sync="searchForm.pageSize"
        @pagination="handleSearch"
      />
    </div>

    <div class="footer">
      <el-row style="color: red;">
        <el-col :span="24">
          提示：
        </el-col>
      </el-row>
      <el-row style="color: red;">
        <el-col :span="24">
          1. 打印仪器标签需要用到【热敏打印机】以及【三防热敏标签纸】；
        </el-col>
      </el-row>

      <el-row style="color: red;">
        <el-col :span="24">
          2.
          由于一般电脑不带蓝牙，打印机建议使用USB版，而不是蓝牙版，推荐使用得力DL-888D型号；
        </el-col>
      </el-row>

      <el-row style="color: red;">
        <el-col :span="24">
          3. 三防热敏标签纸的尺寸为60mm(长)*40mm(高)，推荐得力品牌。
        </el-col>
      </el-row>
    </div>

    <!-- 仪器借出 -->
    <el-dialog
      title="仪器借出登记"
      :visible.sync="approveVisible"
      width="50%"
      center
    >
      <div>
        <div class="install-title">仪器借出信息</div>
        <el-form :rules="rules" :data="stuData" label-width="130px">
          <el-row :gutter="12">
            <el-col :span="12">
              <el-form-item prop="name1" label="承借方名称:">
                <el-input v-model="installForm.name" style="width: 70%" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item prop="contactUser" label="承借方联系人:">
                <el-input
                  v-model="installForm.contactUser"
                  style="width: 70%"
                />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item prop="start" label="借用日期:">
                <el-date-picker
                  style="width: 70%"
                  v-model="installForm.start"
                  value-format="yyyy-MM-dd"
                  type="date"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="end" label="预计归还日期:">
                <el-date-picker
                  style="width: 70%"
                  v-model="installForm.end"
                  value-format="yyyy-MM-dd"
                  type="date"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="12">
            <el-col :span="12">
              <el-form-item label="审批部门:" prop="deptId">
                <treeselect
                  style="width:70%"
                  v-model="installForm.deptId"
                  :options="deptOptionss"
                  :show-count="true"
                  placeholder="请选择使用部门"
                  @select="changeApprovalDep"
                />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <!-- <el-form-item prop="approvalUser" label="审批人:">
                <el-input
                  v-model="installForm.approvalUser"
                  style="width: 70%"
                />
              </el-form-item> -->
              <el-form-item label="审批人:" prop="approvalUser">
                <el-select
                  v-model="installForm.approvalUser"
                  style="width: 70%"
                  placeholder="请选择审批人"
                  multiple
                  @change="handleApprovalUser"
                >
                  <el-option
                    v-for="item in usernameOptions"
                    :key="item.userId"
                    :label="item.empName"
                    :value="item.userId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-col :span="12">
            <el-form-item prop="approvalTime" label="审批日期:">
              <el-date-picker
                style="width: 70%"
                value-format="yyyy-MM-dd"
                v-model="installForm.approvalTime"
                type="date"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item prop="approvalOpinion" label="审批意见:">
              <el-input
                v-model="installForm.approvalOpinion"
                style="width: 70%"
              />
            </el-form-item>
          </el-col>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="approveVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmTransfer">确认</el-button>
      </div>
    </el-dialog>
    <!-- 仪器详情 -->
    <el-dialog
      title="仪器详情"
      :visible.sync="detailsVisible"
      width="90%"
      center
      :data="purchaseForm"
    >
      <div>
        <div class="install-title">仪器基础信息</div>
        <el-form
          ref="purchaseForm"
          :model="purchaseForm"
          :rules="rules"
          label-width="130px"
        >
          <el-row :gutter="12">
            <el-col :span="8">
              <el-form-item prop="name" label="仪器名称:">
                {{ purchaseForm.name || "" }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="manufacturer" label="仪器品牌:">
                {{ purchaseForm.manufacturer || "" }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="model" label="型号规格:">
                {{ purchaseForm.model || "" }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="serialNumber" label="出厂编号:">
                {{ purchaseForm.serialNumber || "" }}
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="startTime" label="出厂日期:">
                {{ purchaseForm.startTime || "" }}
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="检测类别:">
                <span v-if="purchaseForm.classType == '1'"> 水</span>
                <span v-if="purchaseForm.classType == '2'">气</span>
                <span v-if="purchaseForm.classType == '3'">噪声</span>
                <span v-if="purchaseForm.classType == '4'"
                  >土壤、底泥、固废、污泥和生活垃圾</span
                >
                <span v-if="purchaseForm.classType == '5'">样品制备</span>
                <span v-if="purchaseForm.classType == '6'">小型分析仪器</span>
                <span v-if="purchaseForm.classType == '7'">色谱仪 </span>
                <span v-if="purchaseForm.classType == '8'">光谱仪</span>
                <span v-if="purchaseForm.classType == '9'">质谱仪</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="仪器类别:">
                <span v-if="purchaseForm.type == '1'">现场采样仪器</span>
                <span v-if="purchaseForm.type == '2'">现场检测仪器</span>
                <span v-if="purchaseForm.type == '3'">实验室仪器</span>
                <span v-if="purchaseForm.type == '4'">校准仪器</span>
                <span v-if="purchaseForm.type == '5'">样品制备仪器</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="deptId" label="使用部门:">
                {{ purchaseForm.department || "" }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="purchaseCode" label="采购单号/合同号:">
                {{ purchaseForm.purchaseCode || "" }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="fileCode" label="档案编号:">
                {{ purchaseForm.fileCode || "" }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="仪器权属:" prop="isOwn">
                <span v-if="purchaseForm.isOwn == '1'">自有</span>
                <span v-if="purchaseForm.isOwn == '2'">外借</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="remark" label="备注:">
                {{ purchaseForm.remark || "" }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="image1" label="仪器图片:">
                <img
                  style="width: 100px;height:100px"
                  :src="purchaseForm.image1"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="12" v-if="!!purchaseForm.deviceBorrow">
            <div class="install-title">仪器借入信息</div>
            <el-col :span="8">
              <el-form-item prop="name" label="出借方名称:">
                {{ purchaseForm.deviceBorrow.name || "" }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="contactUser" label="出借方联系人:">
                {{ purchaseForm.deviceBorrow.contactUser || "" }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="acceptanceTime" label="预计借用日期:">
                {{ purchaseForm.deviceBorrow.start || "" }} ~
                {{ purchaseForm.deviceBorrow.end || "" }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="approvalTime" label="审批时间:">
                {{ purchaseForm.deviceBorrow.approvalTime || "" }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="approvalDep" label="审批部门:">
                {{ purchaseForm.deviceBorrow.approvalDep || "" }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="approvalOpinion" label="审批意见:">
                {{ purchaseForm.deviceBorrow.approvalOpinion || "" }}
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="approvalUser" label="审批人:">
                {{ purchaseForm.deviceBorrow.approvalUser || "" }}
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="12" v-if="!!purchaseForm.deviceBorrow">
            <div class="install-title">仪器安装验收信息</div>
            <el-col :span="8">
              <el-form-item prop="installUser" label="安装人:">
                {{ purchaseForm.addDeviceInstallTdo.installUser || "" }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="phone" label="安装人联系方式:">
                {{ purchaseForm.addDeviceInstallTdo.phone || "" }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="installTime" label="安装调试日期:">
                {{ purchaseForm.addDeviceInstallTdo.installTime || "" }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="annex" label="仪器附件信息:">
                {{ purchaseForm.addDeviceInstallTdo.annex || "" }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="fileName" label="仪器技术文件名称:">
                {{ purchaseForm.addDeviceInstallTdo.fileName || "" }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="position" label="放置地点:">
                {{ purchaseForm.addDeviceInstallTdo.position || "" }}
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="acceptanceUser" label="验收人:">
                {{ purchaseForm.addDeviceInstallTdo.acceptanceUser || "" }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="acceptanceTime" label="验收日期:">
                {{ purchaseForm.addDeviceInstallTdo.acceptanceTime || "" }}
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="conclusion" label="验收结论:">
                {{ purchaseForm.addDeviceInstallTdo.conclusion || "" }}
              </el-form-item>
            </el-col>

            <el-col :span="16">
              <el-form-item prop="image2" label="插箱及安装图片:">
                <img
                  style="width: 100px;height:100px;margin:5px"
                  :src="purchaseForm.addDeviceInstallTdo.image1"
                />
                <img
                  style="width: 100px;height:100px;margin:5px"
                  :src="purchaseForm.addDeviceInstallTdo.image2"
                />
                <img
                  style="width: 100px;height:100px;margin:5px"
                  :src="purchaseForm.addDeviceInstallTdo.image3"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <div class="install-title">仪器设置信息</div>
          <el-row :gutter="12">
            <el-col :span="8">
              <el-form-item prop="isMaster" label="仪器属性:">
                <span v-if="purchaseForm.isMaster == '1'">主仪器</span>
                <span v-if="purchaseForm.isMaster == '2'">辅助仪器</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="deviceIds" label="关联主要仪器:">
                {{ purchaseForm.deviceIds || "" }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="deviceIds" label="关联辅助仪器:">
                {{ purchaseForm.deviceIds || "" }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="status" label="仪器状态:">
                <span v-if="purchaseForm.status == '0'">报废</span>
                <span v-if="purchaseForm.status == '1'">降级</span>
                <span v-if="purchaseForm.status == '2'">停用</span>
                <span v-if="purchaseForm.status == '3'">准用</span>
                <span v-if="purchaseForm.status == '4'">合格</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="授权使用人:" prop="acceptanceTime">
                {{ purchaseForm.acceptanceTime || "" }}
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="仪器负责人:" prop="acceptanceTime">
                {{ purchaseForm.acceptanceTime || "" }}
              </el-form-item>
            </el-col>
          </el-row>

          <div class="install-title">是否检定/校准</div>
          <el-row :gutter="12">
            <el-col :span="24">
              <el-form-item prop="checkType" label="* 检定周期:">
                <span v-if="purchaseForm.checkType == '1'">检定</span>
                <span v-if="purchaseForm.checkType == '2'">校准</span>
                <span v-if="purchaseForm.checkType == '0'">否</span>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item
                prop="lastTime"
                :label="lastTime[customerDialogStatus]"
              >
                {{ purchaseForm.lastTime || "" }}
              </el-form-item>
            </el-col>

            <el-col :span="7">
              <el-form-item prop="cycle" :label="cycle[customerDialogStatus]">
                <span v-if="purchaseForm.cycle == '1'">1个月</span>
                <span v-if="purchaseForm.cycle == '2'">3个月</span>
                <span v-if="purchaseForm.cycle == '3'">半年</span>
                <span v-if="purchaseForm.cycle == '4'">1年</span>
                <span v-if="purchaseForm.cycle == '5'">2年</span>
                <span v-if="purchaseForm.cycle == '6'">3年</span>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item
                prop="nextTime"
                :label="nextTime[customerDialogStatus]"
              >
                {{ purchaseForm.nextTime || "" }}
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="lastTime" label="上次核查日期:">
                {{ purchaseForm.lastTime || "" }}
              </el-form-item>
            </el-col>

            <el-col :span="7">
              <el-form-item prop="acceptanceTime" label="核查周期:">
                <span v-if="purchaseForm.cycle == '1'">1个月</span>
                <span v-if="purchaseForm.cycle == '2'">3个月</span>
                <span v-if="purchaseForm.cycle == '3'">半年</span>
                <span v-if="purchaseForm.cycle == '4'">1年</span>
                <span v-if="purchaseForm.cycle == '5'">2年</span>
                <span v-if="purchaseForm.cycle == '6'">3年</span>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="nextTime" label="下次仪器核查日期:">
                {{ purchaseForm.nextTime || "" }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="startTime" label="启用日期:">
                {{ purchaseForm.startTime || "" }}
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="12">
            <div class="install-title">仪器检定/校准设置</div>
            <el-col :span="4">
              <el-form-item prop="warning" label="提前:">
                {{ purchaseForm.warning || "" }}
                <span>天预警</span>
              </el-form-item>
            </el-col>

            <el-col :span="4">
              <el-form-item prop="alarm" label="提前:">
                {{ purchaseForm.alarm || "" }}
                <span>天告警</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailsVisible = false">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="批量导入仪器"
      :visible.sync="uploadVisible"
      append-to-body
      width="53%"
    >
      <div class="block">
        <el-timeline>
          <el-timeline-item size="large">
            <span slot="dot" class="time-dot">
              1
            </span>
            <el-row>
              <el-col :span="24">
                下载模板，批量填写仪器信息
              </el-col>
            </el-row>
            <el-row style="padding-top:10px;">
              <el-col :span="24">
                <el-button
                  size="mini"
                  type="primary"
                  @click="handleDownloadData()"
                  >模板下载</el-button
                >
              </el-col>
            </el-row>
          </el-timeline-item>
          <el-timeline-item size="large">
            <span slot="dot" class="time-dot">
              2
            </span>
            <el-row>
              <el-col :span="24">
                上传填写好的仪器信息表格
              </el-col>
            </el-row>
            <el-row style="padding-top:10px;">
              <el-col :span="24">
                <el-upload
                  class="upload-demo"
                  action="/api/excel/importDevice"
                  :on-change="customUploadChange"
                  :file-list="excelFileList"
                  :limit="1"
                  style="width: 300px;"
                >
                  <el-button size="mini" type="primary">点击上传</el-button>
                  <!-- <div class="el-upload__text"><em>点击上传</em></div> -->
                </el-upload>
              </el-col>
            </el-row>
          </el-timeline-item>
        </el-timeline>
        <el-row>
          <el-col :span="24" style="">
            <span style="color: red; font-size: 13px"
              >备注：批量导入仪器功能，请上传正确格式 否则不展示在列表。</span
            >
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="uploadVisible = false">关闭</el-button>
      </div>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog
      title="编辑"
      :visible.sync="editvisible"
      width="100%"
      center
      :close-on-click-modal="false"
      :tree-props="{ children: 'childList', hasChildren: 'hasChildren' }"
    >
      <el-form
        ref="Claimchanges"
        :model="Claimchanges"
        :rules="rules"
        label-width="180px"
      >
        <div class="install-title">仪器基础信息</div>
        <el-row :gutter="12">
          <el-col :span="8">
            <el-form-item prop="name" label="仪器名称:">
              <el-input v-model="Claimchanges.name" style="width: 70%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="manufacturer" label="仪器品牌:">
              <el-input
                v-model="Claimchanges.manufacturer"
                style="width: 70%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="model" label="型号规格:">
              <el-input v-model="Claimchanges.model" style="width: 70%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="serialNumber" label="出厂编号:">
              <el-input
                v-model="Claimchanges.serialNumber"
                style="width: 70%"
              />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item prop="manufactureDate" label="出厂日期:">
              <el-date-picker
                style="width: 70%"
                value-format="yyyy-MM-dd"
                v-model="Claimchanges.manufactureDate"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item prop="type" label="仪器类别:">
              <el-select
                v-model="typeValue"
                style="width: 70%"
                placeholder="请选择仪器类别"
                @change="secondChange($event)"
                value-key="id"
                clearable
              >
                <el-option
                  v-for="item in typleList"
                  :key="item.id"
                  :label="item.name"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item prop="type" label="检测类别:">
              <el-select
                v-model="classTypeValue"
                style="width: 70%"
                placeholder="请选择检测类别"
                @change="second($event)"
                value-key="id"
                clearable
              >
                <el-option
                  v-for="item in classTypeListData"
                  :key="item.id"
                  :label="item.name"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="使用部门:" prop="deptId">
              <treeselect
                style="width:70%"
                v-model="deptId"
                :options="deptOptionss"
                :show-count="true"
                placeholder="请选择使用部门"
                @select="changeDepartment"
              />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item prop="purchaseCode" label="采购单号/合同号:">
              <el-input
                v-model="Claimchanges.purchaseCode"
                style="width: 70%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="12">
          <el-col :span="8">
            <el-form-item prop="fileCode" label="档案编号:">
              <el-input v-model="Claimchanges.fileCode" style="width: 70%" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="仪器权属:" prop="isOwn">
              <el-select
                v-model="Claimchanges.isOwn"
                placeholder="请选择仪器权属"
                style="width: 70%"
                filterable
                clearable
                @change="changeOption"
              >
                <el-option
                  v-for="item in isOwnOptions"
                  :key="item.value"
                  :value="item.value"
                  :label="item.lable"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item prop="remark" label="备注:">
              <el-input v-model="Claimchanges.remark" style="width: 70%" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="12">
          <el-col :span="8">
            <el-form-item prop="image1" label="仪器图片:">
              <template v-if="!isPreview">
                <el-upload
                  class="upload-demo"
                  action=""
                  drag
                  :auto-upload="false"
                  :show-file-list="false"
                  :on-change="handleChangeUpload"
                >
                  <div class="upload-dragger">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">点击上传</div>
                    <div class="el-upload__tip">
                      （注：照片尺寸裁剪为800px*800px）
                    </div>
                  </div>
                </el-upload>
              </template>
              <div class="pre-box" v-else>
                <img :src="previewImg" alt="裁剪图片" style="width: 150px" />
                <el-upload
                  class="upload-demo"
                  action=""
                  :auto-upload="false"
                  :show-file-list="false"
                  :on-change="handleChangeUpload"
                >
                  <el-button type="primary" plain>更换图片</el-button>
                </el-upload>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <template v-if="this.isOwnchoose">
          <el-row :gutter="12" v-if="Claimchanges.deviceBorrow !== null">
            <div class="install-title">仪器借入信息</div>
            <el-col :span="8">
              <el-form-item prop="name" label="出借方名称:">
                <el-input
                  v-model="Claimchanges.deviceBorrow.name"
                  style="width: 70%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="contactUser" label="出借方联系人:">
                <el-input
                  v-model="Claimchanges.deviceBorrow.contactUser"
                  style="width: 70%"
                />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="start,end" label="预计借用日期:">
                <div class="block">
                  <el-date-picker
                    style="width: 100%"
                    v-model="startEnd"
                    type="daterange"
                    range-separator="~"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </div>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="approvalTime" label="审批时间:">
                <el-date-picker
                  style="width: 70%"
                  value-format="yyyy-MM-dd"
                  v-model="Claimchanges.deviceBorrow.approvalTime"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="approvalDep" label="审批部门:">
                <!-- <el-input
                  v-model="Claimchanges.deviceBorrow.approvalDep"
                  style="width: 70%"
                /> -->
                <treeselect
                  style="width:70%"
                  v-model="Claimchanges.deviceBorrow.approvalDep"
                  :options="deptOptionss"
                  :show-count="true"
                  @select="changeDeviceBorrow"
                />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="approvalOpinion" label="审批意见:">
                <el-input
                  v-model="Claimchanges.deviceBorrow.approvalOpinion"
                  style="width: 70%"
                />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="approvalUser" label="审批人:">
                <el-input
                  v-model="Claimchanges.deviceBorrow.approvalUser"
                  style="width: 70%"
                />
                <!-- <el-select
                    v-model="Claimchanges.deviceBorrow.approvalUser"
                    style="width: 70%"
                    placeholder="请选择"
                    filterable
                    multiple
                    @change="handleCheckedApprovalUser"
                  >
                    <el-option
                      v-for="item in usernameOptions"
                      :key="item.userId"
                      :label="item.empName"
                      :value="item.userId"
                    ></el-option>
                  </el-select> -->
              </el-form-item>
            </el-col>
          </el-row>
        </template>

        <div class="install-title">仪器安装验收信息</div>
        <el-row :gutter="12">
          <el-col :span="8">
            <el-form-item prop="installUser" label="安装人:">
              <el-input
                v-model="Claimchanges.addDeviceInstallTdo.installUser"
                style="width: 70%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="phone" label="安装人联系方式:">
              <el-input
                v-model="Claimchanges.addDeviceInstallTdo.phone"
                style="width: 70%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="installTime" label="安装调试日期:">
              <el-date-picker
                style="width: 70%"
                value-format="yyyy-MM-dd"
                v-model="Claimchanges.addDeviceInstallTdo.installTime"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="annex" label="仪器附件信息:">
              <el-input
                v-model="Claimchanges.addDeviceInstallTdo.annex"
                style="width: 70%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="fileName" label="仪器技术文件名称:">
              <el-input
                v-model="Claimchanges.addDeviceInstallTdo.fileName"
                style="width: 70%"
              />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item prop="roomId" label="放置地点:">
              <treeselect
                style="width: 70%"
                v-model="roomId"
                :options="deptOptions"
                :normalizer="normalizer"
                placeholder="选择放置地点"
                @select="changeId"
              />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item prop="acceptanceUser" label="验收人:">
              <el-input
                v-model="Claimchanges.addDeviceInstallTdo.acceptanceUser"
                style="width: 70%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="acceptanceTime" label="验收日期:">
              <el-date-picker
                style="width: 70%"
                value-format="yyyy-MM-dd"
                v-model="Claimchanges.addDeviceInstallTdo.acceptanceTime"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item prop="conclusion" label="验收结论:">
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 99 }"
                v-model="Claimchanges.addDeviceInstallTdo.conclusion"
                style="width: 88%"
              >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="拆箱及安装照片:" prop="img">
              <el-upload
                action="/api/deviceInstall/fileUpload"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-success="imgSuccess"
                :on-error="imgError"
                :limit="3"
                name="files"
                accept=".jpg,.jpeg,.png"
                :on-exceed="handleExceed"
                :on-change="customUploadChangeImage2"
                :before-upload="beforeUpload"
                :before-remove="beforeRemove"
                :file-list="fileList"
              >
                <el-button size="small" type="picture-card">点击上传</el-button>
                <p
                  slot="tip"
                  class="el-upload__tip"
                  style="color: red;margin: -35px 0px -5px 94px;"
                >
                  （注：您最多只能上传3张图片，支持格式为 jpg、jpeg、png）
                </p>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>

        <div class="install-title">仪器设置信息</div>
        <el-row :gutter="12">
          <el-col :span="8">
            <el-form-item prop="isMaster" label="仪器属性:">
              <template size="small">
                <el-radio-group
                  v-model="Claimchanges.isMaster"
                  @change="properties"
                >
                  <el-radio-button label="1">主要仪器</el-radio-button>
                  <el-radio-button label="2">辅助仪器</el-radio-button>
                </el-radio-group>
              </template>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-if="showClass">
            <el-form-item prop="deviceIds" label="关联主要仪器:">
              <div style="display:flex;">
                <el-select
                  v-model="this.selectionData"
                  multiple
                  placeholder="请选择"
                  style="width: 70%"
                >
                  <el-option
                    v-for="item in selectionData"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
                <el-button type="text" @click="Claiminbulk"
                  >&nbsp;选择仪器</el-button
                >
              </div>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-if="showClas">
            <el-form-item prop="deviceIds" label="关联辅助仪器:">
              <div style="display:flex;">
                <el-select
                  v-model="this.selectionData"
                  multiple
                  placeholder="请选择"
                  style="width: 70%"
                >
                  <el-option
                    v-for="item in selectionData"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
                <el-button type="text" @click="auxiliary"
                  >&nbsp;选择仪器</el-button
                >
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="status" label="仪器状态:">
              <el-radio-group v-model="Claimchanges.status">
                <el-radio :label="4">合格</el-radio>
                <el-radio :label="0">报废</el-radio>
                <el-radio :label="1">降级</el-radio>
                <el-radio :label="2">停用</el-radio>
                <el-radio :label="3">准用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="12">
          <el-col :span="8">
            <el-form-item label="授权使用人:" prop="userIds">
              <el-input
                style="width: 70%"
                v-model="userNamedata"
                :readonly="true"
              />
              <el-button type="text" @click="selectUser"
                >&nbsp;选择使用人</el-button
              >
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="仪器负责人:" prop="blame">
              <el-input
                style="width: 70%"
                v-model="userName"
                :readonly="true"
              />
              <el-button type="text" @click="addInvolvedUserId"
                >&nbsp;选择负责人</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>

        <div class="install-title">仪器检定/校准/期间设置</div>
        <el-row :gutter="12">
          <el-col :span="24">
            <el-form-item prop="checkType" label="是否检定/校准:">
              <template>
                <el-radio-group
                  v-model="Claimchanges.checkType"
                  size="small"
                  @change="whether"
                >
                  <el-radio-button label="1">检定</el-radio-button>
                  <el-radio-button label="2">校准</el-radio-button>
                  <el-radio-button label="0">否</el-radio-button>
                </el-radio-group>
              </template>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item
              prop="lastTime"
              :label="lastTime[customerDialogStatus]"
            >
              <el-date-picker
                :disabled="not"
                style="width: 70%"
                value-format="yyyy-MM-dd"
                v-model="Claimchanges.lastTime"
                @change="getStaraTime1"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item prop="cycle" :label="cycle[customerDialogStatus]">
              <el-select
                :disabled="not"
                v-model="Claimchanges.cycle"
                style="width: 70%"
                clearable
                @clear="empty"
                @change="firstColumnChangeAction($event)"
              >
                <el-option
                  v-for="item in acceptanceTimeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item
              prop="nextTime"
              :label="nextTime[customerDialogStatus]"
            >
              <el-date-picker
                :disabled="true"
                style="width: 70%"
                value-format="yyyy-MM-dd"
                v-model="Claimchanges.nextTime"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item prop="lastCheck" label="上次核查日期:">
              <el-date-picker
                :disabled="not"
                style="width: 70%"
                value-format="yyyy-MM-dd"
                v-model="Claimchanges.lastCheck"
                @change="getStaraTimeData"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item prop="checkCycle" label="核查周期:">
              <el-select
                :disabled="not"
                v-model="Claimchanges.checkCycle"
                style="width: 70%"
                clearable
                @clear="empty"
                @change="firstColumnChange($event)"
              >
                <el-option
                  v-for="item in checkCycle"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item prop="nextCheck" label="下次仪器核查日期:">
              <el-date-picker
                :disabled="true"
                style="width: 70%"
                value-format="yyyy-MM-dd"
                v-model="Claimchanges.nextCheck"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="startTime" label="启用日期:">
              <el-date-picker
                :disabled="not"
                style="width: 70%"
                value-format="yyyy-MM-dd"
                v-model="Claimchanges.startTime"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <div class="install-title">仪器检定/校准设置</div>
          <el-col :span="5">
            <el-form-item prop="warning" label="提前">
              <el-input v-model="Claimchanges.warning" style="width: 50px">
              </el-input>
              <span>天预警</span>
            </el-form-item>
          </el-col>

          <el-col :span="5">
            <el-form-item prop="alarm" label="提前">
              <el-input v-model="Claimchanges.alarm" style="width: 50px">
              </el-input>
              <span>天告警</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="editvisible = false">取消</el-button>
        <el-button type="primary" @click="ClaimchangesConfirm">确认</el-button>
      </div>
    </el-dialog>

    <!-- 选择关联仪器 -->
    <el-dialog
      :title="titleMaps[customerDialogStatus]"
      :visible.sync="Batchpopups"
      center
      top="5vh"
      width="1400px"
    >
      <el-form :model="searchForm" ref="searchForm" label-width="110px">
        <el-row :gutter="12">
          <el-col :span="30">
            <el-form :model="searchForm" inline @submit.native.prevent>
              <div style="margin: 5px 5px 5px 800px">
                <el-form-item>
                  <el-input
                    v-model="searchForm.fuzzy"
                    style="width: 250px"
                    placeholder="仪器名称/仪器编号/仪器型号"
                    clearable
                    @keyup.enter.native="handleSearch"
                  />
                </el-form-item>

                <el-form-item>
                  <el-button
                    type="primary"
                    class="iconfont icon-chaxun1"
                    @click="handleSearch"
                  >
                    查询</el-button
                  >
                </el-form-item>
              </div>
            </el-form>
          </el-col>

          <el-col :span="8">
            <el-tree
              :data="data1"
              :props="defaultPropsa"
              @node-click="handleNodeData"
            ></el-tree>
          </el-col>

          <el-col :span="15">
            <el-table
              :model="mainAuxiliary"
              border
              stripe
              max-height="350"
              tooltip-effect="dark"
              :data="mainAuxiliary"
              highlight-current-row
              :header-cell-style="{ background: '#ECF3FC' }"
              style="width: 100%"
              ref="mainAuxiliary"
              @select="selectionCloumn"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                fixed="left"
                width="55"
                align="center"
              />
              <el-table-column
                type="index"
                width="50"
                label="序号"
                fixed="left"
                align="center"
              />
              <el-table-column
                prop="isMaster"
                label="仪器属性"
                width="100px"
                align="center"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.isMaster == '1'">主仪器</span>
                  <span v-if="scope.row.isMaster == '2'">辅助仪器</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="仪器名称"
                width="110px"
                align="center"
              />
              <el-table-column
                prop="number"
                label="仪器编号"
                width="185px"
                align="center"
              />

              <el-table-column
                prop="manufacturer"
                label="仪器品牌"
                width="110px"
                align="center"
              />
              <el-table-column
                prop="model"
                label="仪器型号"
                width="110px"
                align="center"
              />

              <el-table-column
                prop="userName"
                label="授权使用人"
                width="117px"
                align="center"
              >
              </el-table-column>
            </el-table>

            <div class="install-title" style="margin: 15px 0 0 0">已选仪器</div>
            <el-table
              :model="searchFormIsMaster"
              border
              stripe
              max-height="350"
              tooltip-effect="dark"
              :data="tableData1"
              highlight-current-row
              :header-cell-style="{ background: '#ECF3FC' }"
              style="width: 100%"
              ref="tableData1"
            >
              <el-table-column
                type="index"
                width="50"
                label="序号"
                fixed="left"
                align="center"
              />
              <el-table-column
                prop="isMaster"
                label="仪器属性"
                width="100px"
                align="center"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.isMaster == '1'">主仪器</span>
                  <span v-if="scope.row.isMaster == '2'">辅助仪器</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="仪器名称"
                width="110px"
                align="center"
              />
              <el-table-column
                prop="number"
                label="仪器编号"
                width="170px"
                align="center"
              />
              <el-table-column
                prop="manufacturer"
                label="仪器品牌"
                width="100px"
                align="center"
              />
              <el-table-column
                prop="model"
                label="仪器型号"
                width="100px"
                align="center"
              />
              <el-table-column
                prop="userName"
                label="授权使用人"
                width="120px"
                align="center"
              >
              </el-table-column>

              <el-table-column
                fixed="right"
                align="center"
                label="操作"
                width="80px"
              >
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click.native.prevent="deleteRow(scope.$index, tableData1)"
                    size="small"
                  >
                    移出</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="Batchpopups = false">取消</el-button>
        <el-button type="primary" @click="associatedInstruments"
          >确认</el-button
        >
      </div>
    </el-dialog>
    <!-- vueCropper 剪裁图片实现-->
    <el-dialog
      title="图片剪裁"
      :visible.sync="dialogVisible"
      class="crop-dialog"
      append-to-body
    >
      <div class="cropper-content">
        <div class="cropper" style="text-align: center">
          <vueCropper
            ref="cropper"
            :img="option.img"
            :outputSize="option.size"
            :outputType="option.outputType"
            :info="true"
            :full="option.full"
            accept=".jpg,.jpeg,.png"
            :canMove="option.canMove"
            :canMoveBox="option.canMoveBox"
            :original="option.original"
            :autoCrop="option.autoCrop"
            :fixed="option.fixed"
            :fixedNumber="option.fixedNumber"
            :centerBox="option.centerBox"
            :infoTrue="option.infoTrue"
            :fixedBox="option.fixedBox"
            :autoCropWidth="option.autoCropWidth"
            :autoCropHeight="option.autoCropHeight"
            @cropMoving="cropMoving"
          />
        </div>
      </div>
      <div class="action-box">
        <el-upload
          class="upload-demo"
          action=""
          :auto-upload="false"
          :show-file-list="false"
          :on-change="handleChangeUpload"
        >
          <el-button type="primary" plain>更换图片</el-button>
        </el-upload>
        <el-button type="primary" plain @click="clearImgHandle"
          >清除图片</el-button
        >
        <el-button type="primary" plain @click="rotateLeftHandle"
          >左旋转</el-button
        >
        <el-button type="primary" plain @click="rotateRightHandle"
          >右旋转</el-button
        >
        <el-button type="primary" plain @click="changeScaleHandle(1)"
          >放大</el-button
        >
        <el-button type="primary" plain @click="changeScaleHandle(-1)"
          >缩小</el-button
        >
        <!-- <el-button type="primary" plain @click="downloadHandle('blob')"
          >下载</el-button
        > -->
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="finish" :loading="loading"
          >确认</el-button
        >
      </div>
    </el-dialog>
    <!-- 修改授权使用人 -->
    <el-dialog
      title="修改"
      :visible.sync="addInvolvedUserIdVisible"
      center
      width="1000px"
      :close-on-click-modal="false"
    >
      <el-form :inline="true">
        <el-row>
          <el-form-item>
            <div style="height: 560px;overflow: auto;overflow-x: hidden;">
              <div class="head-container">
                <el-input
                  v-model="deptsName"
                  placeholder="请输入部门名称"
                  clearable
                  size="small"
                  prefix-icon="el-icon-search"
                  style="margin-bottom: 20px;"
                />
              </div>
              <div class="head-container">
                <el-tree
                  ref="tree"
                  :data="deptOptionsdata"
                  :props="defaultPropsDept"
                  :expand-on-click-node="false"
                  :filter-node-method="filterNodeDept"
                  default-expand-all
                  @node-click="handleNodeClickDept"
                />
              </div>
            </div>
          </el-form-item>
        </el-row>
      </el-form>
      <div class="container2">
        <tree-transfer
          ref="treeTransfer"
          :title="titles"
          :from_data="fromData"
          :to_data="toData"
          :mode="mode"
          :pid="parentId"
          :defaultProps="{ label: 'label', children: 'children' }"
          :style="{ height: '75%' }"
          defaultTransfer
          filter
          :filter-node="filterNode"
        >
        </tree-transfer>
      </div>
      <div style="margin-top: -97px;text-align: center;">
        <el-button @click="addInvolvedUserIdVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="saveInvolvedUserId"
          :disabled="toData.length === 0"
          >保存</el-button
        >
      </div>
    </el-dialog>
    <!-- 现场照片预览 -->
    <el-dialog :visible.sync="dialogImageArrUrl" center top="5vh" width="50%">
      <el-form :rules="rules" label-width="150px">
        <img :src="this.dialogImageUrl" alt="" style="width: 100%;" />
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogImageArrUrl = false">取消</el-button>
      </div>
    </el-dialog>
    <ViewForm ref="addNewFrom" />
  </div>
</template>

<script>
import { listUser } from "@/api/system/user";
import { getLodop } from "@/utils/LodopFuncs";
import { VueCropper } from "vue-cropper";
import QRCode from "qrcodejs2";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import * as List from "@/api/List";
import ViewForm from "./component/viewForm";
import treeTransfer from "el-tree-transfer";
import * as deptServer from "@/api/dept";
import * as ambientServer from "@/api/ambient";

import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
export default {
  components: {
    VueCropper,
    Pagination,
    ViewForm,
    Treeselect,
    getLodop,
    QRCode,
    treeTransfer
  },
  data() {
    return {
      URL: "https://www.huancelian.com/azImg/",
      isPreview: false,
      dialogVisible: false,
      dialogImageUrl: "",
      dialogImageArrUrl: false,
      previewImg: "", // 预览图片地址
      // 裁剪组件的基础配置option
      option: {
        img: "", // 裁剪图片的地址
        info: false, // 裁剪框的大小信息
        outputSize: 1, // 裁剪生成图片的质量
        outputType: "png", // 裁剪生成图片的格式
        canScale: true, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        canMoveBox: false, // 截图框能否拖动
        autoCropWidth: 800, // 默认生成截图框宽度
        autoCropHeight: 800, // 默认生成截图框高度
        fixedBox: true, // 固定截图框大小 不允许改变
        fixed: false, // 是否开启截图框宽高固定比例
        fixedNumber: [1, 1], // 截图框的宽高比例
        enlarge: 2, // 图片根据截图框输出比例倍数
        full: false, // 是否输出原图比例的截图
        original: true, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        maxImgSize: 1000 //限制图片最大宽度和高度
      },
      // 防止重复提交
      loading: false,
      file: "",
      dataurl: "",
      limit: 5,
      total: 0,
      factorData: [], //数据
      stuData: [],
      fileList: [],
      isOwnchoose: true,
      startEnd: [],
      isLook: false,
      showClass: false,
      showClas: false,
      choosePerson: false,
      deptNameData: [],
      isIndeterminate: true,
      checkAll: false,
      checkedCities: [],
      cities: [],
      checked: [],
      not: false,
      Batchpopups: false,
      tableData1: [],
      img1: [],
      mainAuxiliary: [], //选择关联仪器数据
      //使用部门树选项
      deptOptionss: undefined,
      customerDialogStatus: "create",
      titleMaps: {
        edit: "关联主要仪器",
        create: "关联辅助仪器"
      },
      defaultProps: {
        children: "children",
        label: "label",
        id: "id"
      },
      defaultPropsa: {
        children: "children",
        label: "label"
      },
      titleMap: {
        edit: "关联主要仪器",
        create: "关联辅助仪器"
      },
      lastTime: {
        edit: "上次校准日期:",
        create: "上次检定日期:"
      },
      cycle: {
        edit: "校准周期:",
        create: "检定周期:"
      },
      nextTime: {
        edit: "下次仪器校准日期:",
        create: "下次仪器检定日期:"
      },
      data1: [
        {
          label: "现场采样仪器",
          children: [
            {
              label: "水"
            },
            {
              label: "气"
            },
            {
              label: "噪声"
            },
            {
              label: "土壤、底泥、固废、污泥和生活垃圾"
            }
          ]
        },
        {
          label: "现场检测仪器",
          children: [
            {
              label: "水"
            },
            {
              label: "气"
            },
            {
              label: "噪声"
            },
            {
              label: "土壤、底泥、固废、污泥和生活垃圾"
            }
          ]
        },
        {
          label: "实验室仪器",
          children: [
            {
              label: "样品制备 "
            },
            {
              label: "小型分析仪器"
            },
            {
              label: "色谱仪"
            },
            {
              label: "光谱仪"
            },
            {
              label: "质谱仪"
            }
          ]
        },
        {
          label: "校准仪器",
          children: []
        }
      ],
      typleList: [
        {
          name: "现场采样仪器",
          id: 1,
          children: [
            {
              name: "水",
              id: 1
            },
            {
              name: "气",
              id: 2
            },
            {
              name: "噪声",
              id: 3
            },
            {
              name: "土壤、底泥、固废、污泥和生活垃圾",
              id: 4
            }
          ]
        },
        {
          name: "现场检测仪器",
          id: 2,
          children: [
            {
              name: "水",
              id: 1
            },
            {
              name: "气",
              id: 2
            },
            {
              name: "噪声",
              id: 3
            },
            {
              name: "土壤、底泥、固废、污泥和生活垃圾",
              id: 4
            }
          ]
        },
        {
          name: "实验室仪器",
          id: 3,
          children: [
            {
              name: "样品制备",
              id: 5
            },
            {
              name: "小型分析仪器",
              id: 6
            },
            {
              name: "色谱仪",
              id: 7
            },
            {
              name: "光谱仪",
              id: 8
            },
            {
              name: "质谱仪",
              id: 9
            }
          ]
        },
        {
          name: "校准仪器",
          id: 4,
          children: [
            {
              name: "无",
              id: 1
            }
          ]
        }
      ],
      isOwnOptions: [
        {
          lable: "自有",
          value: 1
        },
        {
          lable: "外借",
          value: 2
        }
      ],
      statusList: [
        {
          name: "报废",
          id: 0
        },
        {
          name: "降级",
          id: 1
        },
        {
          name: "停用",
          id: 2
        },
        {
          name: "准用",
          id: 3
        },
        {
          name: "合格",
          id: 4
        }
      ],
      isOwnList: [
        {
          name: "自有",
          id: 1
        },
        {
          name: "外借",
          id: 2
        }
      ],
      applyStatus: [
        {
          name: "在库",
          id: 1
        },
        {
          name: "待出库",
          id: 2
        },
        {
          name: "已出库",
          id: 3
        }
      ],
      isOwnApplyStatus: [
        {
          name: "在库",
          id: 1
        },
        {
          name: "待出库",
          id: 2
        },
        {
          name: "已出库",
          id: 3
        }
      ],
      manufacturerList: [
        {
          name: "主仪器",
          id: 1
        },
        {
          name: "辅助仪器",
          id: 2
        }
      ],
      checkCycle: [
        {
          name: "1月",
          id: 1
        },
        {
          name: "1季度",
          id: 2
        },
        {
          name: "半年",
          id: 3
        },
        {
          name: "1年",
          id: 4
        },
        {
          name: "2年",
          id: 5
        },
        {
          name: "3年",
          id: 6
        }
      ],
      acceptanceTimeList: [
        {
          name: "1月",
          id: 1
        },
        {
          name: "1季度",
          id: 2
        },
        {
          name: "半年",
          id: 3
        },
        {
          name: "1年",
          id: 4
        },
        {
          name: "2年",
          id: 5
        },
        {
          name: "3年",
          id: 6
        }
      ],
      checkedBlame: "",
      usernameOptions: [],
      usernameOptionsRoomList: [],
      installForm: {},
      computeDate: "",
      addDay: null,
      nextData: null,
      position: null,
      department: null,
      Claimchanges: {
        image1: "",
        type: "",
        classType: "",
        name: "",
        manufacturer: "",
        isOwn: "",
        position: null,
        model: "",
        startTime: "",
        serialNumber: "",
        department: null,
        blame: "",
        deptId: undefined,
        fileCode: "",
        checkType: "",
        purchaseCode: "",
        status: "",
        isMaster: "",
        deviceIds: [],
        userIds: [],
        roomId: null,
        cycle: "",
        checkCycle: "",
        warning: "",
        alarm: "",
        nextTime: "",
        nextCheck: "",
        lastCheck: "",
        lastTime: "",
        manufactureDate: "",
        deviceBorrow: {
          start: "",
          approvalOpinion: "",
          approvalUser: "",
          end: "",
          name: "",
          approvalDep: null,
          approvalTime: "",
          contactUser: ""
        },
        addDeviceInstallTdo: {
          image1: "",
          image2: "",
          image3: "",
          image4: "",
          image5: "",
          acceptanceUser: "",
          installTime: "",
          acceptanceTime: "",
          fileName: "",
          conclusion: "",
          phone: "",
          annex: "",
          installUser: ""
        }
      },
      // 表单校验
      rules: {
        name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
        manufacturer: [
          { required: true, message: "品牌不能为空", trigger: "blur" }
        ],
        model: [{ required: true, message: "型号不能为空", trigger: "blur" }],
        type: [
          { required: true, message: "检测类别不能为空", trigger: "blur" }
        ],
        classType: [
          { required: true, message: "仪器类别不能为空", trigger: "blur" }
        ],
        isOwn: [
          { required: true, message: "仪器权属不能为空", trigger: "blur" }
        ],
        name: [
          { required: true, message: "出借方名称不能为空", trigger: "blur" }
        ],
        start: [
          { required: true, message: "预计借用日期不能为空", trigger: "blur" }
        ],
        status: [
          { required: true, message: "仪器状态不能为空", trigger: "blur" }
        ],
        userIds: [
          { required: true, message: "授权使用人不能为空", trigger: "blur" }
        ],
        blame: [
          { required: true, message: "仪器负责人不能为空", trigger: "blur" }
        ],
        lastTime: [
          { required: true, message: "上次检定日期不能为空", trigger: "blur" }
        ],
        cycle: [
          { required: true, message: "检定周期不能为空", trigger: "blur" }
        ],
        warning: [{ required: true, message: "预警不能为空", trigger: "blur" }],
        alarm: [{ required: true, message: "告警不能为空", trigger: "blur" }],
        name1: [
          { required: true, message: "承借方名称不能为空", trigger: "blur" }
        ],
        end: [
          { required: true, message: "预计归还日期不能为空", trigger: "blur" }
        ]
      },
      deptName: undefined,
      Claimchangesfz: {
        image1: "",
        type: "",
        classType: "",
        name: "",
        manufacturer: "",
        isOwn: "",
        position: null,
        model: "",
        startTime: "",
        serialNumber: "",
        department: null,
        blame: "",
        deptId: undefined,
        fileCode: "",
        checkType: "",
        purchaseCode: "",
        status: "",
        isMaster: "",
        deviceIds: [],
        userIds: [],
        roomId: null,
        cycle: "",
        checkCycle: "",
        warning: "",
        alarm: "",
        nextTime: "",
        nextCheck: "",
        lastCheck: "",
        lastTime: "",
        manufactureDate: ""
      },

      deviceBorrow: {
        start: "",
        approvalOpinion: "",
        approvalUser: "",
        end: "",
        name: "",
        approvalDep: null,
        approvalTime: "",
        contactUser: ""
      },
      addDeviceInstallTdo: {
        image1: "",
        image2: "",
        image3: "",
        image4: "",
        image5: "",
        acceptanceUser: "",
        installTime: "",
        acceptanceTime: "",
        fileName: "",
        conclusion: "",
        phone: "",
        annex: "",
        installUser: ""
      },

      editvisible: false,
      approveVisible: false,
      detailsVisible: false,
      uploadVisible: false,
      searchForm: {
        pageNumber: 1,
        pageSize: 10,
        state: ""
      },
      searchFormIsMaster: {
        pageNumber: 1,
        pageSize: 10,
        state: ""
      },
      searchFormData: {
        type: "",
        classType: ""
      },
      classTypeList: [],
      classTypeListData: [],
      params: {
        id: ""
      },
      purchaseForm: {
        image1: "",
        type: "",
        classType: "",
        name: "",
        manufacturer: "",
        isOwn: "",
        position: null,
        model: "",
        startTime: "",
        serialNumber: "",
        department: null,
        blame: "",
        deptId: undefined,
        fileCode: "",
        checkType: "",
        purchaseCode: "",
        status: "",
        isMaster: "",
        deviceIds: [],
        userIds: [],
        roomId: null,
        cycle: "",
        checkCycle: "",
        warning: "",
        alarm: "",
        nextTime: "",
        nextCheck: "",
        lastCheck: "",
        lastTime: "",
        manufactureDate: "",
        deviceBorrow: {
          start: "",
          approvalOpinion: "",
          approvalUser: "",
          end: "",
          name: "",
          approvalDep: null,
          approvalTime: "",
          contactUser: ""
        },
        addDeviceInstallTdo: {
          image1: "",
          image2: "",
          image3: "",
          image4: "",
          image5: "",
          acceptanceUser: "",
          installTime: "",
          acceptanceTime: "",
          fileName: "",
          conclusion: "",
          phone: "",
          annex: "",
          installUser: ""
        }
      },
      excelFileList: [],
      fileResult: "",
      queryParams: {
        pageNumber: 1,
        pageSize: 10,
        empName: "",
        phonenumber: "",
        deptId: undefined
      },
      // 部门树选项
      deptOptions: [],
      typeValue: "",
      classTypeValue: "",
      selection: [],
      selectionData: [],
      multipleSelection: [],
      multiplese: [],
      printList: [],
      showTitle: false,
      fileResultImage: [],
      type: "",

      parentId: "parentId",
      mode: "transfer",
      titles: ["待选人员", "已选人员"],
      toData: [], //选中的数据
      fromData: [], //根据部门ids查询出的数据结构
      deptPulldownArray: [],
      nodeLableArray: [],
      addInvolvedUserIdVisible: false,
      userName: "",
      userNamedata: "",
      deptsName: null, // 部门名称
      deptOptionsdata: null, // 部门树选项
      defaultPropsDept: { children: "children", label: "label", id: "id" },
      deptId: null,
      updateInvolvedUserIdVisible: false,
      determine: ""
    };
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
    this.handleSearch();
    this.getTreeselectDept();
  },
  methods: {
    handleSearch() {
      List.getdeviceApplyList(this.searchForm).then(res => {
        console.log(res);
        if (res.code === 200) {
          this.factorData = res.result.records || [];
          this.total = res.result.total;
          console.log(this.total);
          console.log(this.factorData);
        }
      });
    },

    // 获取列表勾中id
    handleSelectionChange(val) {
      console.log(val);
      this.multipleselection = val;
      this.multiplese = val;
      var arr = [];
      var arrData = [];
      var selectAll = [];
      for (var item of val) {
        selectAll.push(item);
        this.tableData1 = selectAll;
        arr.push(item.id);
        // console.log(item.id);
        arrData.push(item.name);
        // console.log(arr + []);
        this.Selection = arr;
        console.log(this.Selection);
        this.selectionData = arrData;
        console.log(this.selectionData);
      }
    },
    // 移出
    deleteRow(index, rows) {
      console.log(rows);
      rows.splice(index, 1);
    },
    //生成二维码
    // qrcode() {
    //   console.log("二维码");
    //   // for (let j = 0; j < this.multiplese.length; j++) {
    //   let qrcodes = new QRCode("qrcode", {
    //     width: 60, // 设置宽度，单位像素
    //     height: 60, // 设置高度，单位像素
    //     text: "https://hcl.vip.cpolar.cn?id=" + this.Selection // 设置二维码内容或跳转地址
    //   });
    // // }
    // },
    // 仪器标签打印
    tabPrint() {
      if (this.multiplese && this.multiplese.length > 0) {
        this.printList = this.multiplese;
        console.log(this.printList);
        this.$nextTick(() => {
          this.tagPrint();
          // this.qrcode();
        });
      } else {
        this.$message.info("最少选择一条记录信息");
      }
    },
    tagPrint() {
      const LODOP = getLodop();
      if (LODOP !== undefined) {
        for (let student of this.printList) {
          if (student.type == 1) {
            this.type = "现场采样仪器";
          }
          if (student.type == 2) {
            this.type = "现场检测仪器";
          }
          if (student.type == 3) {
            this.type = "实验室仪器";
          }
          if (student.type == 4) {
            this.type = "校准仪器";
          }
          if (student.type == 5) {
            this.type = "样品制备仪器";
          }
          let printStr = `<div style="text-align: center;padding-top: 10px;font-size:22px;font-weight:bold;font-family: SimHei;">${
            student.name
          }</div>
          <div style="float:right;
                      width: 120%;
                      height: 0.5px;
                      margin-top: 10px;
                      background:#0a0a0a;
                      position: relative;
                      text-align: center;"></div>
					<div style="padding-left: 97px;font-size:12px;padding-top:9px;display: flex">编号:<div style="font-size:10px;padding-top: 1px">${
            student.code
          }</div>
          </div>
                <div style="padding-left: 97px;font-size:12px;padding-top:8px;display: flex">类别:${
                  this.type
                }</div>
					<div style="padding-left: 97px;font-size:12px;padding-top:8px;display: flex"">型号:${
            student.model
          }</div>
					<div style="padding-left: 97px;font-size:12px;padding-top:8px;display: flex"">品牌:${
            student.manufacturer
          }</div>
          `;
          LODOP.NewPage(); //创建新的页，实现多页打印
          //因为对边缘没啥要求，直接根据内容来居中
          LODOP.ADD_PRINT_HTM(0, 0, "60mm", "40mm", printStr);
          LODOP.ADD_PRINT_BARCODE(
            52,
            5,
            100,
            100,
            "QRCode",
            "https://www.huancelian.com?id=" + student.id
          );
        }
      } else {
        // 显示提示信息
        this.showTitle = true;
        // this.$print(this.$refs.labelPrint)
      }
      LODOP.SET_PRINT_MODE("TRYLINKPRINTER_NOALERT", true); // 这个语句设置网络共享打印机连接不通时是否提示一下
      LODOP.PREVIEW();
    },
    fileDownLoad() {
      var url =
        this.$store.getters.sysBaseUrl +
        "/downLoad/CLodop_Setup_for_Win64NT_4.159EN.exe";
      window.open(url);
    },
    // 关闭窗口
    closeDialog() {
      this.visible = false;
    },
    //新增仪器
    addNew() {
      // console.log(1111111111);
      //授权使用人
      List.userList().then(res => {
        this.deptList = res.result;
        console.log(this.deptList);
        this.usernameOptions = this.deptList;

        this.$refs.addNewFrom.usernameOptions = this.deptList;
        // console.log(this.$refs.addNewFrom.usernameOptions);
      });
      List.roomList().then(res => {
        this.deptListRoomList = res.result;
        console.log(this.deptListRoomList);
        this.$refs.addNewFrom.deptOptions = this.deptListRoomList;
        // console.log(this.$refs.addNewFrom.usernameOptions);
      });
      this.$refs.addNewFrom.userName = "";
      this.$refs.addNewFrom.userNamedata = "";
      this.$refs.addNewFrom.installForm = {
        image1: "",
        type: "",
        classType: "",
        name: "",
        manufacturer: "",
        isOwn: "",
        position: "",
        model: "",
        startTime: "",
        serialNumber: "",
        department: null,
        userIds: [],
        blame: "",
        deptId: undefined,
        fileCode: "",
        checkType: "1",
        purchaseCode: "",
        status: "4",
        isMaster: "1",
        // deviceIds: [],
        userIds: "",
        roomId: null,
        cycle: "",
        checkCycle: "",
        warning: "",
        alarm: "",
        nextTime: "",
        nextCheck: "",
        lastCheck: "",
        lastTime: "",
        manufactureDate: "",
        deviceBorrow: {
          start: "",
          approvalOpinion: "",
          approvalUser: "",
          end: "",
          name: "",
          approvalDep: null,
          approvalTime: "",
          contactUser: ""
        },
        addDeviceInstallTdo: {
          image1: "",
          image2: "",
          image3: "",
          image4: "",
          image5: "",
          acceptanceUser: "",
          installTime: "",
          acceptanceTime: "",
          fileName: "",
          conclusion: "",
          phone: "",
          annex: "",
          installUser: ""
        }
      };
      this.$refs.addNewFrom.approveVisible = true;
    },
    //仪器借出
    Instrument(row) {
      console.log(row);
      this.approveVisible = true;
      this.deviceId = row.id;
      // console.log(1111);
      //授权使用人
      List.userList().then(res => {
        this.deptList = res.result;
        console.log(this.deptList);
        this.usernameOptions = this.deptList;
      });
      this.getTreeselect();
    },
    //多选仪器借出
    InstrumentData() {
      if (this.multiplese && this.multiplese.length > 0) {
        this.approveVisible = true;
        this.deviceId = this.Selection;
        // console.log(1111);
        //授权使用人fileUpload
        List.userList().then(res => {
          this.deptList = res.result;
          console.log(this.deptList);
          this.usernameOptions = this.deptList;
        });
        this.getTreeselect();
      } else {
        this.$message.info("最少选择一条记录信息");
      }
    },
    changeApprovalDep(e) {
      console.log(e);
      this.installForm.approvalDep = e.label;
    },
    confirmTransfer() {
      const stuData = {
        deviceId: this.deviceId,
        name: this.installForm.name,
        contactUser: this.installForm.contactUser,
        start: this.installForm.start,
        end: this.installForm.end,
        approvalUser: this.installForm.approvalUser.toString(","),
        approvalDep: this.installForm.approvalDep,
        approvalTime: this.installForm.approvalTime,
        approvalOpinion: this.installForm.approvalOpinion
      };
      List.Loanregistration(stuData).then(res => {
        if (res.code === 200) {
          console.log(res.code);
          this.$notify({
            title: "成功",
            message: res.message,
            type: "success"
          });
          this.approveVisible = false;
          this.handleSearch();
        } else {
          this.$notify({
            title: "失败",
            message: res.message,
            type: "error"
          });
          this.approveVisible = false;
          this.handleSearch();
        }
      });
    },
    // 仪器类别一级改动
    secondColumnChange(e) {
      this.searchFormData.classType = {};
      this.classTypeList = e.children;
      this.searchForm.type = e.id;
    },
    // 检测类别二级改动
    secondColumn(e) {
      this.searchForm.classType = e.id;
    },
    // 编辑仪器类别一级改动
    secondChange(e) {
      console.log(e);
      this.classTypeListData = e.children;
      this.Claimchanges.type = e.id;
    },
    // 编辑检测类别二级改动
    second(e) {
      this.Claimchanges.classType = e.id;
    },
    // 查看
    View(row) {
      this.detailsVisible = true;
      // console.log(row);
      List.detail({ id: row.id }).then(res => {
        this.purchaseForm = res.result;
        if (this.purchaseForm.checkType == 0) {
          this.not = true;
        }
        if (this.purchaseForm.checkType == 1) {
          this.not = false;
          this.customerDialogStatus = "create";
        }
        if (this.purchaseForm.checkType == 2) {
          this.not = false;
          this.customerDialogStatus = "edit";
          this.acceptanceTimeList;
        }
        console.log(this.purchaseForm);

        this.purchaseForm.image1 = this.URL + res.result.image1 || "";

        this.purchaseForm.addDeviceInstallTdo.image1 =
          this.URL + res.result.addDeviceInstallTdo.image1 || "";

        this.purchaseForm.addDeviceInstallTdo.image2 =
          this.URL + res.result.addDeviceInstallTdo.image2 || "";

        this.purchaseForm.addDeviceInstallTdo.image3 =
          this.URL + res.result.addDeviceInstallTdo.image3 || "";
      });
    },
    // 导入仪器
    customUploadChange(file) {
      if (file.status === "ready") return;
      if (file.status === "success") {
        const res = file.response || {};
        if (res && res.code === 200) {
          this.fileResult = file.response.result;
          console.log(this.fileResult);
          this.$message({
            type: "success",
            message: file.response.message
          });
          this.handleSearch();
          this.uploadVisible = false;
        } else {
          this.$message.error("上传失败!");
          this.excelFileList = [];
        }
      } else {
        this.$message.error("上传失败!");
        this.excelFileList = [];
      }
    },
    /** 下载模板 */
    handleDownloadData() {
      var url = "/api/excel/exportDeviceExcel" + "?isTemplate=1";
      window.open(url);
    },
    /** 导出按钮操作 */
    handleDownload() {
      var url = "/api/excel/exportDeviceExcel";
      window.open(url);
    },
    handleUpload() {
      this.uploadVisible = true;
      this.excelFileList = [];
      this.fileResult = "";
    },
    // 编辑
    edit(row) {
      console.log(row);
      this.Selection = "";
      this.getTreeselect();
      // this.updateUserName = ''
      //       this.fromData = []
      this.toData = [];
      this.fileList = [];

      if (row.isMaster == 1) {
        this.showClass = false;
        this.showClas = true;
      }
      if (row.isMaster == 2) {
        this.showClass = true;
        this.showClas = false;
      }
      //下拉框数据
      List.userList().then(res => {
        this.deptList = res.result;
        // console.log(this.deptList);
        this.usernameOptions = this.deptList;
      });
      this.editvisible = true;
      // //设备详情
      List.detail({ id: row.id }).then(res => {
        console.log(res.result);
        this.Claimchanges = res.result;
        this.deptId = res.result.deptId;
        this.roomId = res.result.roomId;
        this.tableData1 = res.result.devices;
        res.result.devices.map(item => {
          this.selectionData.push(item.name);
        });
        var arr = [];
        var arr1 = [];
        if (res.result.users != null) {
          res.result.users.forEach(item => {
            arr.push(item.userName);
          });
          this.userNamedata = arr.join("，");
        }
        if (res.result.blames != null) {
          res.result.blames.forEach(item => {
            arr1.push(item.empName);
          });
          this.userName = arr1.join("，");
        }
        const checkRoleIdList = [];
        res.result.users.map(item => {
          console.log(item);
          if (item !== null) {
            checkRoleIdList.push(item.userId);
            console.log(checkRoleIdList);
          }
        });
        if (res.result.addDeviceInstallTdo.image1 != null) {
          this.fileList.push({
            url: this.URL + res.result.addDeviceInstallTdo.image1
          });
        }
        if (res.result.addDeviceInstallTdo.image2 != null) {
          this.fileList.push({
            url: this.URL + res.result.addDeviceInstallTdo.image2
          });
        }
        if (res.result.addDeviceInstallTdo.image3 != null) {
          this.fileList.push({
            url: this.URL + res.result.addDeviceInstallTdo.image3
          });
        }

        this.$set(this.Claimchanges, "userIds", checkRoleIdList);
        this.Claimchanges.status = res.result.status;
        console.log(this.Claimchanges.status);
        if (res.result.image1 !== "") {
          this.previewImg = this.URL + res.result.image1;
          this.isPreview = true;
        }
        if (res.result.isOwn == 1) {
          this.isOwnchoose = false;
        }
        if (res.result.isOwn == 2) {
          this.isOwnchoose = true;
        }
        const selectionArr = [];
        res.result.devices.map(item => {
          selectionArr.push(item.id);
        });
        this.$set(this.Claimchanges, "deviceIds", selectionArr);
        const selectionData = [];
        res.result.devices.map(item => {
          selectionData.push(item.name);
          console.log(selectionData);
        });
        this.$set(this.Claimchanges, "selectionData", selectionData);

        if (
          res.result.addDeviceInstallTdo == null ||
          res.result.deviceBorrow == null
        ) {
          this.Claimchangesfz = res.result;
          this.Claimchanges = this.Claimchangesfz;
          if (res.result.addDeviceInstallTdo == null) {
            this.Claimchanges.addDeviceInstallTdo = this.addDeviceInstallTdo;
          }
          if (res.result.deviceBorrow == null) {
            this.Claimchanges.deviceBorrow = this.deviceBorrow;
          }
          var arr = [];
          arr.push(this.Claimchanges.deviceBorrow.start);
          arr.push(this.Claimchanges.deviceBorrow.end);
          this.startEnd = arr;
        }
      });

      // 位置列表
      List.roomList().then(res => {
        this.deptListRoomList = res.result;
        console.log(this.deptListRoomList);
        this.deptOptions = this.deptListRoomList;
        console.log(this.deptOptions);
      });
      if (row.type == "1") {
        this.typeValue = "现场采样仪器";
      }
      if (row.type == "2") {
        this.typeValue = "现场检测仪器";
      }
      if (row.type == "3") {
        this.typeValue = "实验室仪器";
      }
      if (row.type == "4") {
        this.typeValue = "校准仪器";
      }

      if (row.classType == "1") {
        this.classTypeValue = "水";
      }
      if (row.classType == "2") {
        this.classTypeValue = "气";
      }
      if (row.classType == "3") {
        this.classTypeValue = "噪声";
      }
      if (row.classType == "4") {
        this.classTypeValue = "土壤、底泥、固废、污泥和生活垃圾";
      }
      if (row.classType == "5") {
        this.classTypeValue = "样品制备";
      }
      if (row.classType == "6") {
        this.classTypeValue = "小型分析仪器";
      }
      if (row.classType == "7") {
        this.classTypeValue = "色谱仪";
      }
      if (row.classType == "8") {
        this.classTypeValue = "光谱仪";
      }
      if (row.classType == "9") {
        this.classTypeValue = "质谱仪";
      }
    },

    // 查询部门下拉树结构
    getTreeselectDept() {
      this.deptOptionsdata = [];
      deptServer.treeselect().then(res => {
        this.deptOptionsdata = this.doProceDept(res.result) || [];
      });
    },
    // 部门模糊查询
    filterNodeDept(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    selectUser() {
      this.fromData = [];
      this.determine = 1;
      this.addInvolvedUserIdVisible = true;
    },
    // 添加授权使用人
    addInvolvedUserId() {
      this.fromData = [];
      this.determine = 2;
      this.addInvolvedUserIdVisible = true;
    },
    // 节点单击事件
    handleNodeClickDept(data) {
      if (data.parentId !== "0") {
        this.deptId = data.id;
      } else {
        this.deptId = "";
      }
      console.log(this.deptId);
      this.deptSearch();
    },
    // 根据选中的部门ids查询下面所有的员工信息
    deptSearch() {
      ambientServer.findUserByDeptId(this.deptId).then(res => {
        this.fromData = [];
        if (res.code === 200 && res.result) {
          this.fromData = res.result || [];

          if (this.toData.length > 0) {
            // 已选数据
            var arr2 = [];
            this.toData.forEach(item => {
              arr2.push(item.id);
            });
            // 待选数据
            var arr3 = [];
            this.fromData.forEach(item => {
              arr3.push(item.id);
            });
            // 已、待选数据交集
            var arr4 = [];
            arr3.forEach(val => {
              if (arr2.indexOf(val) < 0) {
                arr4.push(val);
              } else {
                arr2.splice(arr2.indexOf(val), 1);
              }
            });
            // 筛选后待选数据
            var arr5 = [];
            var sedata = arr4.concat(arr2);
            this.fromData.forEach(item => {
              if (sedata.includes(item.id)) {
                arr5.push({ id: item.id, label: item.label });
              }
            });
            this.fromData = arr5;
          }
        }
      });
    },

    // 装配数据结构
    doProceDept(depts) {
      const res = [];
      depts.forEach(e => {
        const tmp = { ...e };
        if (tmp.children && tmp.children.length > 0) {
          tmp.children = this.doProceDept(tmp.children);
        } else {
          tmp.children = undefined;
        }
        res.push(tmp);
      });
      return res;
    },
    // 保存授权使用人
    saveInvolvedUserId() {
      var userNames = [];
      this.toData.forEach(item => {
        userNames.push(item.label);
      });
      console.log(userNames);
      if (this.determine == 1) {
        this.userNamedata = userNames.join("，");
      }
      if (this.determine == 2) {
        this.userName = userNames.join("，");
      }
      this.handlerInvolvedUserId();
      this.addInvolvedUserIdVisible = false;
    },
    // el-input的change事件移除焦点触发,此处用于给授权使用人赋值
    handlerInvolvedUserId() {
      var userIds = [];
      this.toData.forEach(item => {
        userIds.push(item.id);
      });
      console.log(userIds);
      if (this.determine == 1) {
        this.Claimchanges.userIds = userIds;
        this.toData = [];
      }
      if (this.determine == 2) {
        this.Claimchanges.blame = userIds.join(",");
        this.toData = [];
      }
    },

    changeDeviceBorrow(e) {
      console.log(e.label);
      // this.installForm.deviceBorrow.approvalDep = e.label;
      this.Claimchanges.deviceBorrow.approvalDep = e.id;
    },
    handleCheckedApprovalUser(e) {
      // console.log(e);
      this.Claimchanges.deviceBorrow.approvalUser = e;
      // console.log(this.Claimchanges.deviceBorrow.approvalUser);
    },
    //编辑确认
    ClaimchangesConfirm() {
      this.Claimchanges.deviceBorrow.start = this.startEnd[0];
      this.Claimchanges.deviceBorrow.end = this.startEnd[1];
      List.updateDevice(this.Claimchanges).then(res => {
        if (res.code === 200) {
          console.log(res);
          this.$notify({
            title: "成功",
            message: res.message,
            type: "success"
          });
          this.editvisible = false;
          this.handleSearch();
        } else {
          this.$notify({
            title: "失败",
            message: res.message,
            type: "error"
          });
          this.editvisible = false;
        }
      });
    },
    /** 复制按钮操作 */
    handleCopy(row) {
      console.log(row.id);
      this.$confirm("确定复制?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          List.copyDevice({ id: row.id }).then(res => {
            if (res.code === 200) {
              this.$notify({
                title: "成功",
                message: res.message,
                type: "success"
              });
              this.handleSearch();
            } else {
              this.$notify({
                title: "失败",
                message: res.message,
                type: "error"
              });
            }
          });
        })
        .catch(() => {});
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      this.deptOptionss = [];
      deptServer.treeselect().then(res => {
        this.deptOptionss = this.doProcessDept(res.result) || [];
      });
    },
    doProcessDept(depts) {
      const res = [];
      depts.forEach(e => {
        const tmp = { ...e };
        if (tmp.children && tmp.children.length > 0) {
          tmp.children = this.doProcessDept(tmp.children);
        } else {
          tmp.children = undefined;
        }
        res.push(tmp);
      });
      return res;
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm('是否确认删除名称为"' + row.name + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          List.deleteById({
            id: row.id
          }).then(result => {
            if (result.code === 200) {
              this.$notify({
                title: "成功",
                message: result.message,
                type: "success"
              });
              this.MaintenanceRecords = false;
              this.handleSearch();
            } else {
              this.$notify({
                title: "失败",
                message: result.message,
                type: "error"
              });
            }
          });
        })
        .catch(() => {});
    },

    selectionCloumn(e) {
      // console.log(e);
      this.tableData1 = e;
    },

    beforeUpload(e) {
      // console.log(e);
      this.files = e;
    },
    uploadFiles(e) {
      // console.log(e.target.files);
    },
    handleRemove(files, fileList) {
      // console.log(files, fileList);
    },
    handlePreview(files) {
      // console.log(files);
    },
    // handleExceedImage1(files, fileList) {
    //   // console.log(files);
    //   this.$message.warning(
    //     `当前限制选择 1 张图片，以选 ${files.length} 张照片`
    //   );
    // },
    handleExceed(files, fileList) {
      // console.log(files);
      this.$message.warning(
        `当前限制选择 3 张图片，以选 ${
          files.length
        } 张图片，共选择了 ${files.length + fileList.length} 张图片`
      );
    },
    beforeRemove(files, fileList) {
      return this.$confirm(`确定移除 ${files.name}？`);
    },

    // 上传按钮 限制图片大小和类型
    handleChangeUpload(file, fileList) {
      this.file = file.raw.name;
      const isJPG =
        file.raw.type === "image/jpeg" || file.raw.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG/PNG 格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
        return false;
      }
      // 上传成功后将图片地址赋值给裁剪框显示图片
      this.$nextTick(async () => {
        // base64方式
        // this.option.img = await fileByBase64(file.raw)
        this.option.img = URL.createObjectURL(file.raw);
        this.loading = false;
        this.dialogVisible = true;
      });
    },
    // 放大/缩小
    changeScaleHandle(num) {
      num = num || 1;
      this.$refs.cropper.changeScale(num);
    },
    // 左旋转
    rotateLeftHandle() {
      this.$refs.cropper.rotateLeft();
    },
    // 右旋转
    rotateRightHandle() {
      this.$refs.cropper.rotateRight();
    },
    // 下载
    // downloadHandle(type) {
    //   let aLink = document.createElement("a");
    //   aLink.download = "author-img";
    //   if (type === "blob") {
    //     this.$refs.cropper.getCropBlob(data => {
    //       aLink.href = URL.createObjectURL(data);
    //       aLink.click();
    //     });
    //   } else {
    //     this.$refs.cropper.getCropData(data => {
    //       aLink.href = data;
    //       aLink.click();
    //     });
    //   }
    // },
    // 清理图片
    clearImgHandle() {
      this.option.img = "";
    },
    // 截图框移动回调函数
    cropMoving(data) {
      // 截图框的左上角 x，y和右下角坐标x，y
      // let cropAxis = [data.axis.x1, data.axis.y1, data.axis.x2, data.axis.y2]
      // console.log(cropAxis)
    },
    finish() {
      // 获取截图的 blob 数据
      this.$refs.cropper.getCropBlob(blob => {
        this.loading = true;
        this.dialogVisible = false;
        this.previewImg = URL.createObjectURL(blob);
        this.isPreview = true;
      });

      // 获取截图的 base64 数据
      this.$refs.cropper.getCropData(data => {
        console.log(data);
        //调用
        var file = this.dataURLtoFile(data, this.file);
        console.log(file);
        const formData = new FormData();
        formData.append("files", file);
        console.log(formData);
        List.fileUpload(formData).then(response => {
          if (response.code === 200) {
            this.msgSuccess("上传成功");
            console.log(response.result);
            // let url = response.result;
            // let urlStr = url.lastIndexOf("/");
            // let fileName = url.substr(urlStr + 1);
            // console.log(fileName);
            // this.$emit("listenToChildEvent",1113)
            this.Claimchanges.image1 = response.result[0];
          }
        });
      });
    },
    //将base64转换为文件
    dataURLtoFile(dataurl, filename) {
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
    },

    // 上传成功
    imgSuccess(res, file, fileList) {
      console.log(file);
      // this.fileList = fileList;
      let urlImg = file.response.result[0];
      console.log(urlImg);
      this.img1.push(urlImg);
      console.log(this.img1);
      this.Claimchanges.addDeviceInstallTdo.image1 = this.img1[0];
      this.Claimchanges.addDeviceInstallTdo.image2 = this.img1[1];
      this.Claimchanges.addDeviceInstallTdo.image3 = this.img1[2];
      //这里我是用一个fileList数组存取，当保存的时候进行图片路径处理
      this.$message({
        type: "success",
        message: "上传成功!"
      });
    },
    // 上传失败
    imgError(res) {
      this.$message({
        type: "error",
        message: "上传失败"
      });
    },
    handleExceed(files, fileList) {
      // console.log(files);
      this.$message.warning(
        `当前限制选择 3 张图片，以选 ${
          files.length
        } 张图片，共选择了 ${files.length + fileList.length} 张图片`
      );
    },

    // 删除图片
    beforeRemove(file, fileList) {
      console.log(file);
      console.log(fileList);
      return this.$confirm(`确定移除 ${file.name}？`);
    },

    // 上传按钮 限制图片大小和类型
    handleChangeUpload(file, fileList) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
        return false;
      }
    },
    // 附件上传图片预览事件，这个就是将路径直接放进一个弹窗显示出来就可以了

    handlePictureCardPreview(file) {
      console.log(file);
      this.dialogImageUrl = file.url;
      this.dialogImageArrUrl = true;
    },

    //上传文件2
    customUploadChangeImage2(files) {
      // console.log(files);
      if (files.status === "ready") return;
      if (files.status === "success") {
        const res = files.response || {};
        if (res && res.code === 200) {
          this.fileResultImage.push(files.response.result[0]);
          console.log(this.fileResultImage);
          this.Claimchanges.addDeviceInstallTdo.image1 = this.fileResultImage[0];
          this.Claimchanges.addDeviceInstallTdo.image2 = this.fileResultImage[1];
          this.Claimchanges.addDeviceInstallTdo.image3 = this.fileResultImage[2];
          // this.installForm.addDeviceInstallTdo.image1 = this.fileResult;

          this.$message({
            type: "success",
            message: "上传成功!"
          });
          this.uploadVisible = false;
        } else {
          this.$message.error("上传失败!");
          this.fileList = [];
        }
      } else {
        this.$message.error("上传失败!");
        this.fileList = [];
      }
    },

    changeOption(value) {
      if (value == 1) {
        this.isOwnchoose = false;
      }
      if (value == 2) {
        this.isOwnchoose = true;
      }
    },

    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.childList && !node.childList.length) {
        delete node.childList;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.childList
      };
    },
    changeId(e) {
      console.log(e);
      this.position = e.id;
      this.Claimchanges.roomId = e.id;
      this.Claimchanges.position = e.name;
    },
    changeDepartment(e) {
      console.log(e);
      this.Claimchanges.department = e.label;
      this.Claimchanges.deptId = e.id;
    },

    properties(e) {
      console.log(e);
      if (e == 1) {
        this.showClass = false;
        this.showClas = true;
      }
      if (e == 2) {
        this.showClass = true;
        this.showClas = false;
      }
    },

    //选择关联主要仪器
    Claiminbulk() {
      this.Batchpopups = true;
      this.customerDialogStatus = "edit";
      this.searchFormIsMaster.isMaster = 1;
      List.getdeviceApplyList(this.searchFormIsMaster).then(res => {
        console.log(res);
        if (res.code === 200) {
          this.mainAuxiliary = res.result.records;
          this.total = res.result.total;
          console.log(this.mainAuxiliary);
        }
      });
    },
    //选择关联辅助仪器
    auxiliary() {
      this.Batchpopups = true;
      this.customerDialogStatus = "create";
      this.searchFormIsMaster.isMaster = 2;
      List.getdeviceApplyList(this.searchFormIsMaster).then(res => {
        console.log(res);
        if (res.code === 200) {
          this.mainAuxiliary = res.result.records;
          this.total = res.result.total;
          console.log(this.mainAuxiliary);
        }
      });
    },
    handleNodeData(data) {
      console.log(data);
      if (data.label == "现场采样仪器") {
        this.searchForm.type = 1;
      }
      if (data.label == "现场检测仪器") {
        this.searchForm.type = 2;
      }
      if (data.label == "实验室仪器") {
        this.searchForm.type = 3;
      }
      if (data.label == "校准仪器") {
        this.searchForm.type = 4;
      }
      if (data.label == "水") {
        this.searchForm.classType = 1;
      }
      if (data.label == "气") {
        this.searchForm.classType = 2;
      }
      if (data.label == "噪声") {
        this.searchForm.classType = 3;
      }
      if (data.label == "土壤、底泥、固废、污泥和生活垃圾") {
        this.searchForm.classType = 4;
      }
      if (data.label == "样品制备") {
        this.searchForm.classType = 5;
      }
      if (data.label == "小型分析仪器") {
        this.searchForm.classType = 6;
      }
      if (data.label == "色谱仪") {
        this.searchForm.classType = 7;
      }
      if (data.label == "光谱仪") {
        this.searchForm.classType = 8;
      }
      if (data.label == "质谱仪") {
        this.searchForm.classType = 9;
      }
      List.getdeviceApplyList(this.searchForm).then(res => {
        console.log(res);
        if (res.code === 200) {
          this.mainAuxiliary = res.result.records;
        }
      });
    },

    associatedInstruments() {
      // console.log(222);
      this.Claimchanges.deviceIds = this.Selection;
      console.log(this.Claimchanges.deviceIds);
      this.Batchpopups = false;
    },

    handleCheckedCitiesUser(e) {
      console.log(e);
      this.Claimchanges.userIds = e;
      console.log(this.Claimchanges.userIds);
    },
    handleApprovalUser(e) {
      console.log(e);
      this.installForm.approvalUser = e;
      console.log(this.installForm.approvalUser);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    chooseAcceptancePerson() {
      this.choosePerson = true;
      List.selectDeptTrees().then(res => {
        console.log(res);
        if (res.code === 200) {
          this.deptNameData = res.result;
          console.log(this.deptNameData);
        }
      });
    },

    handleCheckedBlame() {},
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      console.log(this.checkedCities);
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      console.log(value);
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
      this.checked = value;
      console.log(this.checked);
      var arr = [];
      for (let item of value) {
        arr.push(item.userId);
        console.log(arr);
        this.checkedBlame = arr;
      }
    },

    head() {
      this.Claimchanges.blame = this.checkedBlame.toString();
      this.choosePerson = false;
    },

    handleNodeClick(data) {
      console.log(data);
      this.queryParams.deptId = data.deptId;
      // this.Claimchanges.deptId = data.deptId;
      this.getList();
    },

    getList() {
      this.loading = true;
      listUser(this.queryParams)
        .then(response => {
          console.log(response);
          var userList = "";
          var arr = [],
            arr1 = [],
            arr2 = [];
          userList = response.result.records;
          for (let item of userList) {
            arr.push(item.userId + "-" + item.empName);
            arr1.push(item.userId);
            arr2.push(item);
            console.log(arr2);
            this.cities = arr2;
            this.editArr = arr1;
            console.log(this.editArr);
            console.log(this.cities);
            // this.mainAuxiliary = arr2
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },

    whether(e) {
      console.log(e);
      if (e == 0) {
        this.not = true;
      }
      if (e == 1) {
        this.not = false;
        this.customerDialogStatus = "create";
      }
      if (e == 2) {
        this.not = false;
        this.customerDialogStatus = "edit";
        this.acceptanceTimeList;
      }
    },
    getStaraTime1(e) {
      console.log(e);
      this.Claimchanges.lastCheck = e;
      console.log(this.Claimchanges.lastCheck);
      this.Claimchanges.cycle = null;
    },
    getStaraTimeData(e) {
      // console.log(e);
      this.Claimchanges.lastCheck = e;
      console.log(this.Claimchanges.lastCheck);
      this.firstColumn();
    },
    firstColumn() {
      console.log(this.computeDate);

      if (this.computeDate === 1) {
        this.addDay = 30;
        console.log(this.Claimchanges.lastCheck);
        this.getStaraTime(this.Claimchanges.lastCheck, this.addDay);
        this.Claimchanges.nextCheck = this.nextData;
        console.log(this.Claimchanges.nextCheck);
      }
      if (this.computeDate === 2) {
        this.addDay = 90;
        console.log(this.Claimchanges.lastCheck);
        this.getStaraTime(this.Claimchanges.lastCheck, this.addDay);
        this.Claimchanges.nextCheck = this.nextData;
        console.log(this.Claimchanges.nextCheck);
      }
      if (this.computeDate === 3) {
        this.addDay = 180;
        console.log(this.Claimchanges.lastCheck);
        this.getStaraTime(this.Claimchanges.lastCheck, this.addDay);
        this.Claimchanges.nextCheck = this.nextData;
        console.log(this.Claimchanges.nextCheck);
      }
      if (this.computeDate === 4) {
        this.addDay = 365;
        console.log(this.Claimchanges.lastCheck);
        this.getStaraTime(this.Claimchanges.lastCheck, this.addDay);
        this.Claimchanges.nextCheck = this.nextData;
        console.log(this.Claimchanges.nextCheck);
      }
      if (this.computeDate === 5) {
        this.addDay = 730;
        console.log(this.Claimchanges.lastCheck);
        this.getStaraTime(this.Claimchanges.lastCheck, this.addDay);
        this.Claimchanges.nextCheck = this.nextData;
        console.log(this.Claimchanges.nextCheck);
      }
      if (this.computeDate === 6) {
        this.addDay = 1095;
        console.log(this.Claimchanges.lastCheck);
        this.getStaraTime(this.Claimchanges.lastCheck, this.addDay);
        this.Claimchanges.nextCheck = this.nextData;
        console.log(this.Claimchanges.nextCheck);
      }
    },

    getStaraTime(date, days) {
      if (days == undefined || days == "") {
        days = null;
      }
      var date = new Date(date);
      date.setDate(date.getDate() + this.addDay);
      var month = date.getMonth() + 1;
      var day = date.getDate();
      console.log(this.addDay);
      this.nextData =
        date.getFullYear() +
        "-" +
        this.getFormatDate(month) +
        "-" +
        this.getFormatDate(day);
      console.log(
        date.getFullYear() +
          "-" +
          this.getFormatDate(month) +
          "-" +
          this.getFormatDate(day)
      );
    },
    getFormatDate(arg) {
      if (arg == undefined || arg == "") {
        return "";
      }

      var re = arg + "";
      if (re.length < 2) {
        re = "0" + re;
      }

      return re;
    },
    // 下次检定校准日期
    firstColumnChangeAction(e) {
      console.log(e);
      this.computeDate = e;
      this.Claimchanges.checkCycle = e;
      console.log(this.computeDate);

      if (e === 1) {
        (this.Claimchanges.warning = "15"), (this.Claimchanges.alarm = "7");
        this.addDay = 30;
        console.log(this.Claimchanges.lastTime);
        this.getStaraTime(this.Claimchanges.lastTime, this.addDay);
        this.Claimchanges.nextTime = this.nextData;
        this.Claimchanges.nextCheck = this.nextData;
        console.log(this.Claimchanges.nextTime);
      }
      if (e === 2) {
        (this.Claimchanges.warning = "30"), (this.Claimchanges.alarm = "7");
        this.addDay = 90;
        console.log(this.Claimchanges.lastTime);
        this.getStaraTime(this.Claimchanges.lastTime, this.addDay);
        this.Claimchanges.nextTime = this.nextData;
        this.Claimchanges.nextCheck = this.nextData;
      }
      if (e === 3) {
        (this.Claimchanges.warning = "60"), (this.Claimchanges.alarm = "10");
        this.addDay = 180;
        console.log(this.Claimchanges.lastTime);
        this.getStaraTime(this.Claimchanges.lastTime, this.addDay);
        this.Claimchanges.nextTime = this.nextData;
        this.Claimchanges.nextCheck = this.nextData;
      }
      if (e === 4) {
        (this.Claimchanges.warning = "90"), (this.Claimchanges.alarm = "15");
        this.addDay = 365;
        console.log(this.Claimchanges.lastTime);
        this.getStaraTime(this.Claimchanges.lastTime, this.addDay);
        this.Claimchanges.nextTime = this.nextData;
        this.Claimchanges.nextCheck = this.nextData;
      }
      if (e === 5) {
        (this.Claimchanges.warning = "90"), (this.Claimchanges.alarm = "15");
        this.addDay = 730;
        console.log(this.Claimchanges.lastTime);
        this.getStaraTime(this.Claimchanges.lastTime, this.addDay);
        this.Claimchanges.nextTime = this.nextData;
        this.Claimchanges.nextCheck = this.nextData;
      }
      if (e === 6) {
        (this.Claimchanges.warning = "90"), (this.Claimchanges.alarm = "15");
        this.addDay = 1095;
        console.log(this.Claimchanges.lastTime);
        this.getStaraTime(this.Claimchanges.lastTime, this.addDay);
        this.Claimchanges.nextTime = this.nextData;
        this.Claimchanges.nextCheck = this.nextData;
      }
      if (e === 7) {
        (this.Claimchanges.warning = "无"), (this.Claimchanges.alarm = "无");
        this.addDay = null;
        this.Claimchanges.nextTime = null;
        this.Claimchanges.nextCheck = null;
      }
    },
    firstColumnChange(e) {
      console.log(e);
      this.computeDate = e;
      this.Claimchanges.checkCycle = e;
      console.log(this.computeDate);

      if (e === 1) {
        this.addDay = 30;
        console.log(this.Claimchanges.lastTime);
        this.getStaraTime(this.Claimchanges.lastTime, this.addDay);
        this.Claimchanges.nextCheck = this.nextData;
        console.log(this.Claimchanges.nextTime);
      }
      if (e === 2) {
        this.addDay = 90;
        console.log(this.Claimchanges.lastTime);
        this.getStaraTime(this.Claimchanges.lastTime, this.addDay);
        this.Claimchanges.nextCheck = this.nextData;
      }
      if (e === 3) {
        this.addDay = 180;
        console.log(this.Claimchanges.lastTime);
        this.getStaraTime(this.Claimchanges.lastTime, this.addDay);
        this.Claimchanges.nextCheck = this.nextData;
      }
      if (e === 4) {
        this.addDay = 365;
        console.log(this.Claimchanges.lastTime);
        this.getStaraTime(this.Claimchanges.lastTime, this.addDay);
        this.Claimchanges.nextCheck = this.nextData;
      }
      if (e === 5) {
        this.addDay = 730;
        console.log(this.Claimchanges.lastTime);
        this.getStaraTime(this.Claimchanges.lastTime, this.addDay);
        this.Claimchanges.nextCheck = this.nextData;
      }
      if (e === 6) {
        this.addDay = 1095;
        console.log(this.Claimchanges.lastTime);
        this.getStaraTime(this.Claimchanges.lastTime, this.addDay);
        this.Claimchanges.nextCheck = this.nextData;
      }
      if (e === 7) {
        this.addDay = null;
        this.Claimchanges.nextCheck = null;
      }
    },
    empty(e) {
      (this.Claimchanges.warning = ""), (this.Claimchanges.alarm = "");
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-upload-list {
  display: flex;
  margin: 0px;
  width: 100%;
  li {
    width: 120px;
    height: 80px;
    margin: 0;
  }
}

/deep/.el-upload--picture-card {
  background-color: #fbfdff;
  border: 0px dashed #c0ccda;
  border-radius: 12px;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  cursor: pointer;
  line-height: 40px;
  vertical-align: top;
}

.clearfix {
  line-height: 40px;
  display: flex;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.install-title {
  display: flex;
  align-items: center;
  line-height: 30px;
  padding-left: 20px;
  color: #fff;
  background-color: #d7dae2;
  justify-content: flex-start;
  margin-bottom: 10px;
}
.delete {
  width: 10px;
  height: 10px;
  position: relative;
  top: -10px;
  cursor: pointer;
}
.user-info-head {
  position: relative;
  display: inline-block;
  height: 120px;
}

::v-deep.avatar-upload-preview {
  width: 400px;
  border-radius: 0%;
  height: 400px;
  > img {
    transform: translateX(0);
  }
}
.user-info-head:hover:after {
  content: "+";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color: #eee;
  background: rgba(0, 0, 0, 0.5);
  font-size: 24px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: pointer;
  line-height: 110px;
  border-radius: 50%;
}

/deep/.upload-dragger {
  background-color: #fff;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.cropper-wrapper {
  //height: calc(100vh - 50px);
  .pre-box {
    button {
      width: 100px;
      margin-top: 15px;
    }
  }
}

/deep/.el-dialog {
  position: relative;
  margin: 0 auto 50px;
  background: #ffffff;
  border-radius: 2px;
  box-sizing: border-box;
  width: 80%;
}

.crop-dialog {
  .cropper-content {
    padding: 0 40px;

    .cropper {
      width: 900px;
      height: 900px;
    }
  }

  .action-box {
    padding: 25px 40px 0 40px;
    display: flex;
    justify-content: center;

    button {
      width: 80px;
      margin-right: 15px;
    }
  }

  .dialog-footer {
    button {
      width: 100px;
    }
  }
}

/deep/.el-radio {
  color: #606266;
  font-weight: 500;
  line-height: 1;
  position: relative;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  outline: none;
  font-size: 14px;
  margin-right: 8px;
}

.el-divider--vertical {
  display: inline-block;
  width: 2px;
  height: 30em;
  margin: 0px 5px;
  vertical-align: middle;
  position: relative;
}

.container2 {
  width: 680px;
  height: 620px;
  overflow: auto;
  overflow-x: hidden;
  margin-left: 250px;
  margin-top: -525px;
}
/deep/ .wl-transfer .transfer-main {
  padding: 10px;
  height: calc(100% - 80px);
  box-sizing: border-box;
  overflow: auto;
}
</style>
